import React from 'react';
import { Card, Typography, Space, Alert } from 'antd';
import { AudioOutlined, InfoCircleOutlined } from '@ant-design/icons';
import MyCustomer from './MyCustomer';

const { Title, Paragraph } = Typography;

const VoiceChatExample: React.FC = () => {
  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <Card>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <div>
            <Title level={2}>
              <AudioOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
              语音录制聊天演示
            </Title>
            <Paragraph>
              这是一个演示语音录制功能的示例页面。用户可以录制语音消息并发送给客服，
              客服会自动回复相应的消息。
            </Paragraph>
          </div>

          <Alert
            message="功能说明"
            description={
              <ul style={{ margin: '8px 0', paddingLeft: '20px' }}>
                <li>点击麦克风按钮开始录音</li>
                <li>录音时按钮会变为红色停止按钮</li>
                <li>录音完成后会自动发送语音消息</li>
                <li>语音消息会以音频播放器形式显示</li>
                <li>客服会自动回复语音消息</li>
                <li>支持播放、暂停、进度控制</li>
              </ul>
            }
            type="info"
            showIcon
            icon={<InfoCircleOutlined />}
            style={{ marginBottom: '20px' }}
          />

          <div style={{ border: '1px solid #e8e8e8', borderRadius: '8px', overflow: 'hidden' }}>
            <MyCustomer
              serverUrl="http://localhost:5000"
              customerId={`demo_user_${Date.now()}`}
              customerName="演示用户"
              isCustomerService={false}
              serviceName="智能客服"
              enableVoice={true}
              voiceConfig={{ provider: 'web' }}
              ttsConfig={{ 
                provider: 'web', 
                voice: 'zh-CN', 
                speed: 1, 
                pitch: 1 
              }}
            />
          </div>

          <Card size="small" title="技术特性">
            <Space direction="vertical" size="small">
              <Paragraph style={{ margin: 0 }}>
                <strong>前端技术：</strong>React + TypeScript + Ant Design + Web Audio API
              </Paragraph>
              <Paragraph style={{ margin: 0 }}>
                <strong>后端技术：</strong>Node.js + Express + Multer + 文件系统存储
              </Paragraph>
              <Paragraph style={{ margin: 0 }}>
                <strong>音频格式：</strong>支持 WAV、MP3、OGG 等浏览器支持的格式
              </Paragraph>
              <Paragraph style={{ margin: 0 }}>
                <strong>文件限制：</strong>最大 10MB，自动格式验证
              </Paragraph>
            </Space>
          </Card>
        </Space>
      </Card>
    </div>
  );
};

export default VoiceChatExample; 